<template>
  <el-row
    :gutter="20"
    v-infinite-scroll="infiniteScroll"
    infinite-scroll-disabled="noMore"
    class="full-height"
  >
    <el-col :span="24">
      <div class="title-box common-text text-center">
        <h1>QImages</h1>
        <h5 class="secondary-text">Share your images int this website</h5>
      </div>
    </el-col>
    <transition-group name="el-zoom-in-top" tag="div" class="full-height">
      <el-col :span="6" v-for="(item,index) in imageCards" :key="index">
        <el-image :src="item.url" fit="cover" :lazy="true" @click.stop="toDetails(item.id)"></el-image>
      </el-col>
    </transition-group>
    <el-col
      :span="24"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    ></el-col>
    <el-col :span="24" v-show="noMore" class="text-center secondary-text">
      <i class="el-icon-info"></i> 没有更多了......
    </el-col>
  </el-row>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import request from "../http/request";
import ImageCard from "../model/ImageCard";
import UserInfo from "../model/UserInfo";

@Component
export default class Home extends Vue {
  imageCards: ImageCard[] = [];
  tags: string[] = [];
  activeIndex = -1;
  pageNum = 1;
  loading = false;
  noMore = false;

  created() {
    this.load();
  }
  infiniteScroll() {
    this.pageNum++;
    this.load();
  }
  load() {
    this.loading = true;
    request
      .getImages(this.pageNum)
      .then(res => {
        if (res.data.code === 0) {
          const images = res.data.data.map((ele: any) => {
            return ImageCard.create(ele);
          });
          if (images.length === 0) {
            this.noMore = true;
          }
          this.imageCards = this.imageCards.concat(images);
        } else {
          this.$message({
            showClose: true,
            message: "图片加载失败",
            type: "warning"
          });
        }
        this.loading = false;
      })
      .catch(err => {
        this.$message({
          showClose: true,
          message: "图片加载失败",
          type: "warning"
        });
        this.loading = false;
        this.noMore = true;
      });
  }
  toDetails(index: number) {
    this.$router.push("/details/" + index);
  }
}
</script>

<style scoped lang='scss'>
.title-box {
  width: 100%;
  height: 100px;
  h5 {
    margin-top: 20px;
  }
}
.el-image {
  width: 100%;
  height: 220px;
  padding: 10px 0;
}
</style>
